{% extends 'layout.html' %}
{% load static %}

{% block content  %}
    <div class="container">
        <div class="panel panel-default">
          <div class="panel-heading">折线图</div>
          <div class="panel-body">
              <div id="m1" style="width: 100%;height:300px;"></div>
          </div>
        </div>
        <div class="row">
            <div class="col-sm-8">
                <div class="panel panel-default">
                  <div class="panel-heading">柱状图</div>
                  <div class="panel-body">
                    <div id="m2" style="width: 100%;height:400px;"></div>
                  </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="panel panel-default">
                  <div class="panel-heading">饼图</div>
                  <div class="panel-body">
                      <div id="m3" style="width: 100%;height:400px;"></div>

                  </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="{% static 'js/echarts.js' %}"></script>
    <script type="text/javascript">

        $(function (){
            initLine();
            initBar();
            initPie();
        })

        /**
         * 初始化折线图
         **/
        function initLine(){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('m1'));

            var option = {
                          title: {
                                text: '分公司业绩图',
                                left:"center",
                          },
                          tooltip: {
                            trigger: 'axis'
                          },
                          legend: {
                                data: [],
                                bottom:0,
                          },
                          toolbox: {
                            feature: {
                              saveAsImage: {}
                            }
                          },
                          xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: []
                          },
                          yAxis: {
                            type: 'value'
                          },
                          series: [
                            {
                              name: 'Email',
                              type: 'line',
                              stack: 'Total',
                              data: [120, 132, 101, 134, 90, 230, 210]
                            },
                            {
                              name: 'Union Ads',
                              type: 'line',
                              stack: 'Total',
                              data: [220, 182, 191, 234, 290, 330, 310]
                            },
                          ]
                        };

            $.ajax({
                url:"/chart/line/",
                type:"get",
                dataType:"JSON",
                success:function (res){
                    //将后台返回的的数据更新到option中。
                    if (res.status){
                        option.legend.data = res.data.legend;
                        option.xAxis.data = res.data.x_axis;
                        option.series = res.data.series_list;

                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    }
                }
            })

        }

        /**
         * 初始化柱状图
         **/
        function initBar(){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('m2'));

            // 指定图表的配置项和数据
            var option = {
            title: {
                text: '员工业绩阅读汇总信息',
                textAlign:"auto",
                left:"center",
            },
            tooltip: {},
            legend: {
                data: [],
                bottom:0,
            },
            xAxis: {
              data: []
            },
            yAxis: {},
            series: []
            };

            $.ajax({
                url:"/chart/bar/",
                type:"get",
                dataType:"JSON",
                success:function (res){
                    //将后台返回的的数据更新到option中。
                    if (res.status){
                        option.legend.data = res.data.legend;
                        option.xAxis.data = res.data.x_axis;
                        option.series = res.data.series_list;

                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    }
                }
            })
        }

        /**
         * 初始化饼状图
         **/
        function initPie(){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('m3'));

            var option = {
                      title: {
                        text: '部门预算占比',
                        subtext: '关西分公司',
                        left: 'center'
                      },
                      tooltip: {
                        trigger: 'item'
                      },
                      legend: {
                            orient: 'vertical',
                            left: 'left',
                            bottom:0,
                      },
                      series: [
                        {
                          name: '预算',
                          type: 'pie',
                          radius: ['40%', '70%'],
                          avoidLabelOverlap: false,
                          itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                          },
                          label: {
                            show: false,
                            position: 'center'
                          },
                          emphasis: {
                            label: {
                              show: true,
                              fontSize: '40',
                              fontWeight: 'bold'
                            }
                          },
                          labelLine: {
                            show: false
                          },
                          data: [
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            { value: 300, name: 'Video Ads' }
                          ]
                        }
                      ]
                    };

            $.ajax({
                url:"/chart/pie/",
                type:"get",
                dataType:"JSON",
                success:function (res){

                    if (res.status){
                        option.series[0].data = res.data;

                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    }
                },
            });
        }

    </script>
{% endblock %}